<template>
  <div class="mall">
    <nav-bar></nav-bar>
    <div class="mall-page clearfix">
      <div class="classify-list">
        <div class="xyd-container">
          <div class="xyd-c-title">图书分类</div>
          <div class="xyd-c-content">
            <ul>
              <li v-for="c,i in category" :key="i">
                <div class="ttop">{{c.name}}</div>
                <div class="tbottom" v-if="c.children">
                  <ul class="clearfix">
                    <li v-for="cc,j in c.children" :key="j">
                      <a :href="'#/mall/list?catid='+cc.id">{{cc.name}}</a>
                    </li>
                  </ul>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="main-page">
        <div class="xyd-carousel-container">
          <!-- <div class="xyd-carousel-search">
            <form @submit="handleSubmit">
              <input type="text" placeholder="小说/教辅/文学..."/>
              <button v-waves class="orange-btn">搜索</button>
            </form>
          </div> -->
          <el-carousel height="372px" trigger="click" arrow="never" :interval="5000">
            <el-carousel-item v-for="item,i in ads" :key="i">
              <img :src="item.image_url"/>
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="book-list">
          <ul class="clearfix">
            <li v-for="item,i in product" :key="i">
              <a :href="`#/mall/list/${item.id}`"><img :src="item.pic"/></a>
            </li>
          </ul>
        </div>
      </div>
      <div class="right-side-bar">
        <div class="btn-group">
          <button class="yellow-btn" @click="goShopcar"><i class="ion-android-cart"></i>购物车</button>
          <button class="orange-btn" @click="goOrder"><i class="ion-android-list"></i>我的订单</button>
        </div>
        <div class="xyd-container">
          <div class="xyd-c-title">最新动态</div>
          <div class="xyd-c-content">
            <ul class="news-list" v-if="news && news.length !== 0">
              <li v-for="item,i in news" :key="i">{{item.title}}</li>
            </ul>
          </div>
        </div>
        <div class="xyd-container">
          <div class="xyd-c-title">新书预售</div>
          <div class="xyd-c-content">
            <div class="new-book-list">
              <book-item :value="item" v-if="i === 0" v-for="item,i in newbook" :key="i"></book-item>
            </div>
          </div>
        </div>
        <div class="xyd-container">
          <div class="xyd-c-title">热卖榜</div>
          <div class="xyd-c-content">
            <ul class="hot-list">
              <li v-for="item,i in hot_sold" :key="i">
                <book-item :value="item" v-if="i === 0"></book-item>
                <span v-if="i !== 0">{{i + 1}}.<a :href="`#/mall/list/${item.id}`">{{item.title}}</a></span>
              </li>
              <li><button class="normal-btn-outline" @click="$router.push('/mall/list')">查看更多</button></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar } from 'views/layout'
import { getShop } from 'api/shop'
import book2 from '@/assets/mock_images/book2.png'
import BookItem from './bookItem.vue'
export default {

  name: 'index',
  components: {
    NavBar,
    BookItem
  },
  data() {
    return {
      book2,
      ads: [],
      category: [],
      newbook: [],
      hot_sold: [],
      product: [],
      news: []
    };
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      getShop({
        p: 0
      })
      .then(res => {
        console.log(res)
        this.product = res.data.product
        this.category = res.data.cat
        this.newbook = res.data.newbook
        this.ads = res.data.ads
        this.news = res.data.news
        this.hot_sold = res.data.hot_sold
      })
      .catch(err => console.log(err))
    },
    goShopcar() {
      this.$router.push('/mall/shopcar?type=0')
    },
    goOrder() {
      this.$router.push('/mall/order-list?type=0')
    },
    handleSubmit(e) {
      e.preventDefault()
      console.log(e)
    }
  },
  watch: {
    '$route'() {
      this.fetchData()
    }
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.mall{
  .mall-page{
    width: 1200px;
    margin: 0 auto;
    .classify-list{
      float: left;
      width: 280px;
      .xyd-container{
        .xyd-c-content{
          >ul{
            padding: 12px;
            >li{
              &:last-child{
                border-bottom: 0;
              }
              padding: 15px 0;
              border-bottom: 1px solid #e5e6e7;
              .ttop{
                line-height: 20px;
              }
              .tbottom{
                color: #999;
                font-size: 12px;
                line-height: 20px;
                >ul{
                  >li{
                    float: left;
                    margin-right: 14px;
                    >a{
                      &:hover{
                        color: #00A2EA;
                        text-decoration: underline;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .main-page{
      float: left;
      width: 710px;
      .xyd-carousel-container{
        padding: 0 30px;
        position: relative;
        .xyd-carousel-search{
          position: absolute;
          z-index: 3;
          top: 10px;
          left: 140px;
          width: 400px;
          form{
            >input{
              width: 290px;
              height: 36px;
              padding: 6px 12px;
              font-size: 12px;
              vertical-align: middle;
              position: absolute;
              left: 0;
              &:focus{
                border-color: #EF6401;
              }
            }
            >button{
              vertical-align: middle;
              height: 36px;
              line-height: 1.5;
              width: 110px;
              color: #fff;
              position: absolute;
              right: 0;
            }
          }
        }
        img{
          width: 100%;
          height: 100%;
        }
      }
      .book-list{
        padding: 30px;
        >ul{
          margin: -5px -15px;
          >li{
            float: left;
            border: 1px solid #e5e6e7;
            margin: 5px 15px;
            width: 140px;
            height: 140px;
            transition: all .5s;
            &:hover{
              box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
            }
            img{
              width: 138px;
              height: 138px;
            }
          }
        }
      }
    }
    .right-side-bar{
      float: left;
      width: 210px;
      ul.news-list{
        padding: 10px;
        >li{
          line-height: 20px;
          width: 188px;
          word-break: break-all;//截断，中文无影响，英文会直接截断，或者用normal
          overflow: hidden;//溢出隐藏
          text-overflow: ellipsis;//省略号
          white-space: nowrap;//不换行
        }
      }
      .new-book-list{
        padding: 20px 0;
      }
      ul.hot-list{
        >li{
          border-top: 1px solid #e5e6e7;
          padding: 15px 0;
          margin: 0 10px;
          &:first-child{
            padding: 0;
            margin: 0;
          }
          &:last-child{
            text-align: center;
          }
          >span{
            a{
              &:hover{
                color: #00A2EA;
                text-decoration: underline;
              }
            }
          }
        }
      }
      .btn-group{
        text-align: center;
        margin-bottom: 10px;
        >button{
          font-size: 14px;
          line-height: 1.5;
          width: 100px;
          height: 30px;
        }
      }
    }
  }
}

</style>